@use './common/config.scss' as *;
@import './common';

html {
  .toolbar-tip__tooltip {
    @include setCssVar(text-color, #ffffff);
    @include setCssVar(bg-color, #303133);

    z-index: $fullscreenZIndex-full;
    color: getCssVar(text-color);
    background-color: getCssVar(bg-color);
  }
  &.dark .toolbar-tip__tooltip {
    @include setCssVar(text-color, #141414);
    @include setCssVar(bg-color, #f5f5f5);
  }
}

$iconHeight: 18px; // 工具栏按钮高度
$iconPadding: 7.5px; // 工具栏按钮左/右间距
$splitPadding: 20px; // 分隔线左/右间距

// 模块：工具栏 toolbar
@mixin toolbar {
  @import 'quill-easy-color/dist/index.css';

  .ql-toolbar {
    position: relative;
    border: solid 1px #adb0b8;
    @include fontFamilyList;
    @include fontSizeList;
    @include lineHeightList;

    &.toolbar-top {
      border-bottom: 0;
      border-radius: 2px 2px 0 0;
    }

    &.toolbar-bottom {
      border-top: 0;
    }

    &.ql-snow {
      background-color: getCssVar(editor-bg-color);
      button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .ql-active,
      .ql-picker-label.ql-active,
      .ql-picker-label:hover,
      .ql-picker-item.ql-selected,
      .ql-picker-item:hover,
      button.ql-active,
      button:hover {
        color: #5e7ce0;

        .icon-triangle-down {
          border-top-color: #5e7ce0;
        }
      }
    }

    .ql-picker-item:focus,
    .ql-picker-options:focus {
      outline: none;
    }

    button > i {
      line-height: 18px;
      font-size: 16px;
    }

    button {
      outline: none;
    }

    .ql-block {
      display: inline-block;
      line-height: initial;
      margin-right: $splitPadding - $iconPadding;
      padding-right: $splitPadding - $iconPadding;
      border-right: solid 1px #adb0b8;

      &:last-child {
        border-right: 0;
      }

      button {
        height: $iconHeight;
        width: 16px;
        padding: 0;
      }

      .ql-picker {
        height: $iconHeight;
        color: #252b3a;
      }

      .ql-picker-label {
        padding: 0;
      }

      .ql-picker-label::before {
        line-height: $iconHeight;
      }

      d-toolbar-item button {
        margin-left: $iconPadding;
        margin-right: $iconPadding;

        &:first-child {
          margin-left: 0;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }

    .ql-formats {
      margin-left: $iconPadding;
      margin-right: $iconPadding;
      font-size: 0; /* 防止出现幽灵空白节点，导致更多按钮图标与分隔线不对齐 */
    }

    .ql-picker.ql-header {
      @include toolbarPicker('', 98px);
    }
  }

  .ql-formats {
    &.ql-color-container,
    &.ql-bg-color-container,
    &.ql-font-family-container {
      margin-right: 0;
    }

    &.ql-color-container {
      margin-left: 4px;
    }

    &.ql-align-container {
      margin-right: 4px;
    }
  }

  .ql-snow.ql-toolbar,
  .ql-bubble .ql-toolbar {
    .ql-color-picker {
      &.ql-color,
      &.ql-background {
        .ql-picker-item {
          width: 18px;
          height: 18px;
          margin: 2px;
          border: 1px solid #141414;
          &.blank {
            width: 100%;
            &:hover::before {
              content: none;
            }
          }
          &.custom {
            &:hover::before {
              content: none;
            }
          }
          &.ql-selected {
            &::before {
              margin-left: 5px;
              margin-top: 1px;
              width: 6px;
              height: 12px;
            }
          }
          &:hover {
            &::before {
              content: '';
              flex-shrink: 0;
              display: block;
              width: 22px;
              height: 22px;
              margin-top: -3px;
              margin-left: -3px;
              border: 1px solid #38383c;
              box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
              transform: rotate(0deg);
              filter: none;
            }
          }
        }
      }
    }
  }
  .ql-toolbar {
    .ql-picker.ql-expanded {
      .ql-picker-label {
        color: inherit;
        border-color: transparent;
      }

      .ql-picker-options {
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
        border-radius: 1px;
        border: none;
        color: #252b3a;
      }

      &.ql-header,
      &.ql-font,
      &.ql-line-height,
      &.ql-size {
        .ql-picker-options {
          margin-left: -6px;
          padding-left: 0;
          padding-right: 0;

          .ql-picker-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 15px;

            // 初始化设置下拉框所有选项都不勾选
            &::after {
              display: inline-block;
              width: 16px;
              height: 16px;
              margin-left: 10px;
              margin-top: -6px;
              content: '';
            }
            // 解决工具栏下拉框高亮问题
            &.ql-selected {
              &::after {
                margin-top: -12px;
                content: 'L';
                font-size: initial;
                font-family: arial;
                -ms-transform: scaleX(-1) rotate(-45deg); /* IE 9 */
                -webkit-transform: scaleX(-1) rotate(-45deg); /* Chrome, Safari, Opera */
                transform: scaleX(-1) rotate(-45deg);
              }
            }
          }
        }
      }

      &.ql-header .ql-picker-item[data-value='1']::after {
        font-size: 2em;
      }

      &.ql-header .ql-picker-item[data-value='2']::after {
        font-size: 1.5em;
      }

      &.ql-header .ql-picker-item[data-value='3']::after {
        font-size: 1.17em;
      }

      .ql-picker-item {
        &:hover {
          color: #252b3a;
          background-color: #f2f5fc;
        }
      }
      &.ql-color-picker {
        .ql-picker-item {
          &:hover {
            color: inherit;
            background-color: var(--bg);
          }
        }
      }
    }

    .ql-picker-label {
      outline: none;
      border: 0;
    }

    .ql-color-picker {
      display: flex;
      width: 36px;
      margin: 0 5px;
      .ql-picker {
        &-label {
          width: 28px;
          flex-shrink: 0;
        }
        &-expand {
          display: inline-flex;
          height: 100%;
          width: 100%;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          &:hover {
            color: #fff;
            i.icon {
              border-top-color: #5e7ce0;
            }
          }
        }
      }

      i.icon {
        @include arrowIcon;
        position: static;
        margin-top: 2.5px;
      }

      &:hover {
        &.ql-picker.ql-expanded {
          .ql-picker-label {
            color: #5e7ce0;
          }
        }
      }

      .ql-picker-options {
        width: 240px;
        padding: 16px 10px;
        .custom {
          position: relative;
          margin-top: 4px;
          height: 22px;
          &:hover {
            background-color: rgba(0, 0, 0, 0.04);
          }
        }
      }
    }

    .ql-color-picker {
      .ql-picker-label {
        &:hover,
        &.ql-active {
          @include toolbarSvgColor {
            fill: #252b3a;
          }
          @include toolbarFontIconColor {
            color: #252b3a;
          }
        }
      }
    }
    button,
    .ql-picker-label {
      &:hover,
      &.ql-active {
        @include toolbarSvgColor {
          fill: #5e7ce0;
        }
        @include toolbarFontIconColor {
          color: #5e7ce0;
        }
      }
      @include toolbarSvgColor {
        fill: #252b3a;
      }
      @include toolbarFontIconColor {
        color: #252b3a;
      }

      &.ql-disabled {
        @include toolbarSvgColor {
          fill: #adb0b8;
          cursor: not-allowed;
        }
      }
    }
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}